<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.5.3/themes/icon.css">
	<script type="text/javascript" src="../../jquery-easyui-1.5.3/jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
	<link rel="stylesheet" href="../../jquery-easyui-1.5.3/themes/default/easyui.css">
	<link rel="stylesheet" href="../../jquery-easyui-1.5.3/demo/demo.css">
	<script type="text/javascript" src="jquery.edatagrid-0116-2.js"></script>

	<!--按需求修改------------------------>
	<style>
		/*选中背景色改为绿色*/
		.datagrid-row-selected {
			background: lightgreen;
			color: #000000;
		}
	</style>
	<!------------------------------------>

</head>
<body>
	<h1>Editable DataGrid</h1>
	<div style="margin-bottom:10px">
		<span class="selectBgc">test</span>
		<a href="#" onclick="javascript:$('#tt').edatagrid('addRow')">AddRow</a>
		<a href="#" onclick="javascript:$('#tt').edatagrid('saveRow')">SaveRow</a>
		<a href="#" onclick="javascript:$('#tt').edatagrid('cancelRow')">CancelRow</a>
		<a href="#" onclick="javascript:$('#tt').edatagrid('destroyRow')">destroyRow</a>
	</div>
	<!--按需求设置单选状态 singleSelect-->
	<table id="tt" style="width:auto;height:200px"
			title="Editable DataGrid"
			url="datagrid_data.json"
			singleSelect="false"
		    striped="true">
		<thead>
			<tr>
				<th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
				<th field="productid" width="100" editor="text">Product ID</th>
				<th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
				<th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
				<th field="attr1" width="150" editor="text">Attribute</th>
				<th field="dbclick" width="150" editor="{type:'checkbox',options:{on:'*',off:''}}">类别</th>
				<th field="confirmPlanner" width="150" editor="{type:'checkbox',options:{on:plannerToServer,off:''}}">计划员</th>
			</tr>
		</thead>

	</table>
	<script type="text/javascript">

		/*不需要请删除**************/
        //计划员
        var plannerToServer = "sam";
        //确定栏的 field 值
        var confirmPlanner = "confirmPlanner"
		/***************************/


        $(function(){
            //可编辑
            editSatus();
            //单击不选中
            unselectRow();
        });

        //可编辑表格自由切换，如果不许要编辑则变成.datagrid
        function editSatus() {
            $('#tt').edatagrid({
            });
        }

        /*如果需要单击选中，请去除*************/
		//单击，如果确定栏有数据则可以选中
        function unselectRow() {
            $("#tt").datagrid({
                onClickRow: function (rowIndex, rowData) {
                    var rows = $("#tt").datagrid("getRows");
                    for(var i = 0; i<rows.length;i++) {
						if(!rows[rowIndex].confirmPlanner) {
                            $(this).datagrid('unselectRow', rowIndex);
                        }else {
                            $(this).datagrid('selectRow', rowIndex);
                        }
                    }
                }
			})
        }
        /***************************/

        //测试传值
        $(".selectBgc").click(function () {
            //选中行
            var datas = $("#tt").datagrid("getSelections");
        })
	</script>
</body>
</html>